<template>
  <div id="myApp" class="myHeight" >
    <el-container>
      <el-header>
        <el-col :span="6">
          <span style="font-size: 20px;margin-left:-65px;color: black">教务信息平台</span>
        </el-col>
        <el-col :span="8">&nbsp;</el-col>
        <el-col :span="12" align="right">
          <el-button type="info" size="mini" icon="el-icon-edit"  plain @click="openDialog">修改密码</el-button>
          <el-button type="info" size="mini" icon="el-icon-check" plain @click="loginout">退出系统</el-button>
          <i class="el-icon-s-custom person" ></i><span style="font-size: 18px;margin-left: 8px;"
                                                        @click="selectOne">{{ stuName
          }}</span>
        </el-col>
      </el-header>
      <el-container>
        <el-aside>
          <!--修改密码对话框-->
          <el-dialog title="修改密码" :visible.sync="dialogFormVisible">
            <el-form :model="form" :rules="rules"  label-width="auto" style="width:85%" class="demo-form-inline form">
              <el-form-item label="用户名" :label-width="formLabelWidth">
                <el-input v-model="form.stuName" autocomplete="off" disabled></el-input>
              </el-form-item>
              <el-form-item label="旧密码" :label-width="formLabelWidth">
                <el-input v-model="form.oldPwd" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item prop="newPwd" label="新密码" :label-width="formLabelWidth">
                <el-input v-model="form.newPwd" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item prop="newPwd2" label="确认密码" :label-width="formLabelWidth">
                <el-input v-model="form.newPwd2" autocomplete="off"></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="cancel">取 消</el-button>
              <el-button type="primary" @click="updatePwd">确 定</el-button>
            </div>
          </el-dialog>
          <!--查询个人信息对话框-->
          <el-dialog title="个人信息" :visible.sync="dialogFormVisible1">
            <el-form  :model="student"  label-width="auto"   style="width:85%"
                      class="demo-form-inline form">
              <el-form-item label="学号：">
                <el-input v-model="student.stuNum" placeholder="学号" readonly></el-input>
              </el-form-item>
              <el-form-item label="姓名：">
                <el-input v-model="student.stuName" placeholder="姓名" readonly></el-input>
              </el-form-item>
              <el-form-item label="身份证号：">
                <el-input v-model="student.stuCard" placeholder="身份证号" readonly></el-input>
              </el-form-item>
              <el-form-item label="学院：">
                <el-input v-model="student.stuAcademy" placeholder="学院" readonly></el-input>
              </el-form-item>
              <el-form-item label="专业：">
                <el-input v-model="student.stuMajor" placeholder="专业" readonly></el-input>
              </el-form-item>
              <el-form-item label="行政班级：">
                <el-input v-model="student.stuClass" placeholder="班级" readonly></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="cancel1">取 消</el-button>
              <el-button type="primary" @click="closeDialog">确 定</el-button>
            </div>
          </el-dialog>
          <el-menu router background-color="#afe9ff" collapse-transition
                   text-color="black" active-text-color="#ffd04b"  default-active="/stuWelcome">
            <el-submenu index="1">
              <template slot="title">
                <i class="el-icon-s-tools" style="color: #13ce66"></i>
                <span class="size">选课管理</span>
              </template>
              <el-menu-item-group >
                <el-menu-item index="/selCourse" class="ms">立即选课</el-menu-item>
                <el-menu-item index="/stuSelectionList" class="ms">查询选课</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="2">
              <template slot="title">
                <i class="el-icon-s-custom" style="color: #13ce66"></i>
                <span class="size">成绩管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="/stuGrade" class="ms">查询成绩</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="4">
              <template slot="title">
                <i class="el-icon-date" style="color: #13ce66"></i>
                <span class="size">学力管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="/stuMotiveList" class="ms">查看学力值</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="3">
              <template slot="title">
                <i class="el-icon-lollipop" style="color: #13ce66"></i>
                <span class="size">英语版块</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="/englishList" class="ms">英语角</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="5">
              <template slot="title">
                <i class="el-icon-warning" style="color: #13ce66"></i>
                <span class="size">警告通知</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="/warningList" class="ms">警告信息</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-main>
          <router-view/>
        </el-main>
      </el-container>
    </el-container>
  </div>

</template>

<script>
  import axios from "axios";
  //导入Qs
  import Qs from 'qs'
  export default {
    data(){
      var validatePwd = (rule, value, callback) => {
        if (value === "") {
          callback(new Error("请输入密码"));
        } else {
          if (this.form.newPwd2 !== "") {
            this.$refs.ruleForm.validateField("newPwd2");
          }
          callback();
        }
      };

      var validatePwd2 = (rule, value, callback) => {
        if (value === "") {
          callback(new Error("请再次输入密码"));
        } else if (value !== this.form.newPwd) {
          callback(new Error("两次输入密码不一致!"));
        } else {
          callback();
        }
      };
      return {
        stuName:"",
        // 学生信息
        student:{
          stuNum:"",
          stuName:"",
          stuCard:"",
          stuAcademy:"",
          stuMajor:"",
          stuClass:""
        },
        // 绑定的表单数据源
        form:{
          stuName:"",
          oldPwd:"",
          newPwd:"",
          newPwd2:""
        },
        student:{
          stuNum:"",
          stuPwd:"",
          stuName:""
        },
        formLabelWidth:"120px",
        // 修改密码的对话框
        dialogFormVisible:false,
        dialogFormVisible1:false,
        rules:{
          newPwd: [{ required: true, validator: validatePwd, trigger: "blur" }],
          newPwd2: [
            { required: true, validator: validatePwd2, trigger: "blur" },
          ],
        }
      }
    },
    mounted() {
      this.stuName = localStorage.getItem("stuName");
    },
    // name:'index'
    methods:{
      // 获取学生信息
      selectOne(){
        // 打开对话框
        this.dialogFormVisible1 = true;
        let stuNum = localStorage.getItem("stuNum");
        // 发起GET请求，获取信息
        axios.get(
          "http://localhost:1313/student/selectOne",
          {params:{stuNum:stuNum}}
        ).then((res)=>{
          console.log(res);
          if(res.data.code == 200){
            // 将返回的数据赋值给student表单
            this.student.stuNum = res.data.data.stuNum;
            this.student.stuName = res.data.data.stuName;
            this.student.stuCard = res.data.data.stuCard;
            this.student.stuAcademy = res.data.data.stuAcademy;
            this.student.stuMajor = res.data.data.stuMajor;
            this.student.stuClass = res.data.data.stuClass;
          }else{
            this.$message.error(res.data.msg)
          }
        })
      },
      // 取消修改密码
      cancel(){
        this.dialogFormVisible = false;
        this.form.stuName = "";
        this.form.oldPwd = "";
        this.form.newPwd ="";
        this.form.newPwd2="";
      },
      // 取消
      cancel1(){
        this.dialogFormVisible1 = false;
      },
      closeDialog(){
        this.dialogFormVisible1 = false;
      },
      // 打开修改密码模态框，获取用户信息
      openDialog(){
        this.dialogFormVisible = true;
        // 获取本地存储的用户信息
        this.student.stuNum = localStorage.getItem("stuNum");
        // 根据用户名查询当前用户的密码
        axios.get(
          "http://localhost:1313/student/selectOne",
          {params:{stuNum:this.student.stuNum}}
        ).then((res)=>{
          console.log(res)
          //将返回数据赋值给绑定数据，完成数据渲染
          this.form.stuName = res.data.data.stuName;
          this.form.oldPwd = res.data.data.stuPwd;
        });


      },
      // 修改密码
      updatePwd(){
        let that = this;
        // 发起请求
        axios({
          headers:{'Content-Type':'application/x-www-form-urlencoded'},
          method:"post",
          url:"http://localhost:1313/student/updatePwd",
          data:Qs.stringify({
            stuNum:that.student.stuNum,
            stuName:that.student.stuName,
            stuPwd:that.form.oldPwd,
            newPwd:that.form.newPwd})
        }).then((res)=>{
          console.log(res)
          //判断当前状态码请求是否成功
          if (res.data.code == 200) {
            //1.消息提示
            that.$message({
              message: res.data.msg,
              type:'success'
            })
            // 将最新的用户密码信息存入本地
            localStorage.setItem("stuPwd",that.form.newPwd);
          } else {
            that.$message({
              message: res.data.msg,
              type:'error'
            })
          }
          // 关闭修改密码模态框
          // 清空文本框数据
          that.form.stuName ="";
          that.form.oldPwd = "";
          that.form.newPwd  ="";
          that.form.newPwd2  ="";
          that.dialogFormVisible = false;
        })
      },
      // 退出系统
      loginout(){
        // 退出到达根页面
        this.$router.replace("/");
        // 清除本地存储
        localStorage.clear();
      }
    },

  }
</script>
<style scoped>
  .el-input--suffix .el-input__inner {
    padding-right: 15px;
  }
  .form{
    display: grid;
    justify-content: center;
    /* align-items: center; */
    justify-items: center;
  }
  /*字体信息*/
  .size{
    font-size: 18px;
  }
  .ms{
    font-size: 16px;
  }
  .person{
    margin-left: 20px;
  }
  .el-button--info.is-plain:hover {
    color: #fff;
    background: #5ed4ff;
    border-color: #fff;
  }
  .el-icon-s-custom:before {
    content: "\E7AB";
  }
  .myHeight{
    margin-top: -40px;
  }
  .el-header{
    display: flex;
    background-color: #5ed4ff;
    color: #896363;
    padding-top: 20px;
    height: 100%;
    font-size: 18px;
    margin-top: -12px;
  }
  .el-aside {
    margin-top: 15px;
    background-color: #a172d1;
    color: white;
    height: 100%;
  }

  .el-main {
    color: #2c9999;
  }
  .el-container{
    height: 100%;
  }

  .el-submenu__title {
    padding-left: 40px;
    color: rgb(167, 131, 153);
    background-color: rgb(43 107 43);
  }
</style>
